<template>
	<view class="zongbox" style="width: 750upx;height: 100vh;">
		<u-navbar id="navbar" :is-back="true" back-icon-color="#FFFFFF" :back-text-style="backstyle"
			title-color="#FFFFFF" back-text="添加会员" :background="background">
		</u-navbar>
		<view class="head-box">
			<view class="center-box">
				<view class="all-text-box">
					<view class="titles-text">
						关联客户
					</view>
					<view class="slogan-text">
						时刻关注客户的身体健康变化
					</view>
					<view class="envelope-img">
						<image src="https://bsyjk-pic.bsyjk.cn/l/448413BE88AD4EEF90198419BC61803C.png"
							style="width: 146upx;height: 134upx;" mode=""></image>
					</view>
					<view class="invite-but">
						发送邀请
						<button open-type="share" title="分享" class="openChat"></button>
					</view>
				</view>
				<!-- 关联客户有什么作用 -->
				<view class="effect-box">
					<view class="effect-title">
						关联客户有什么作用？
					</view>
					<view class="every-effect-list">
						1.可随时跟踪客户的基本健康状况和健康数据
					</view>
					<view class="every-effect-list">
						2.可对关注的客户推送健康商品
					</view>
				</view>
			</view>
		</view>
		<view class="loading-box" v-show="loadingone">
			<u-loading :show="loadingone" color="#41ADBA" size="70"></u-loading>
			<view class="loading-textsl">
				加载中
			</view>
		</view>
	</view>
</template>

<script>
	import uLoading from "@/uview-ui/components/u-loading/u-loading.vue"
import uNavbar from "@/uview-ui/components/u-navbar/u-navbar.vue"


	export default {
		components: {
			uNavbar,
			uLoading,

		},
		data() {
			return {
				background: {
					backgroundImage: 'linear-gradient(10deg, rgb(129, 192, 66,0), rgb(46, 167, 224,0))'
				},
				backstyle: {
					color: '#ffffff',
					'white-space': 'nowrap',
					'font-size': '36upx'
				},
				height: 0,
				send: false, //点击状态
				colro: '#666666',
				loadingone: false,
				code: '', //邀请码
				name: '', //昵称
				imgUrl: '', //头像
			};
		},
		onLoad(e) {
			// console.log(e,69999999)
			let relevance = uni.getStorageSync('relevance');
			if(e){
				uni.setStorageSync('relevance',e)
				this.code = e.code;
				this.name = e.name;
				this.imgUrl = e.imgUrl;
			}else if(relevance){
				this.code = relevance.code ? relevance.code : '';
				this.name = relevance.name ? relevance.name : '';
				this.imgUrl = relevance.imgUrl ? relevance.imgUrl : '';
			}
			
			wx.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ["shareAppMessage", "shareTimeline"]
			})
		},
		methods: {
			// 获取邀请码
			getCode() {
				this.loadingone = true;
				this.$api.get(global.apiUrls.addvips, {
						empUserId: global.userInfo.adviserId, //顾问id
					})
					.then(res => {
						console.log(res.data, '取消收藏文章')
						if (res.data.code == 1000) {
							this.code = res.data.result;
							this.loadingone = false;
						} else {
							this.loadingone = false;
						}
					}).catch(err => {
						this.loadingone = false;
						console.log(res)
					})
			},
			// 分享
			onShareAppMessage(res) {
				// 此处的distSource为分享者的部分信息，需要传递给其他人
				let _this = this;
				console.log('/pages/tab/home?type=2' + '&code=' + _this.code + '&name=' + _this.name + '&imgUrl=' + _this
					.imgUrl)
				// if (distSource == 'InviteYourFamily') {
					return {
						title: '百岁园健康',
						type: 0,
						path: '/pages/tab/home?type=2' + '&code=' + _this.code + '&name=' + _this.name + '&imgUrl=' + _this
							.imgUrl,
						summary: "为了让你更健康，我想邀请你关联家人健康，让我每天为你守护",
						imageUrl: "http://static.bsyjk.cn/userimage/C110C90BC47B41D6847343443594513E.jpeg"
					}
				// }
			},
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		color: #FFFFFF;
		font-size: 36upx;

	}

	.zongbox {
		background-image: url(https://bsyjk-pic.bsyjk.cn/l/353A78CB78994002870A577CEEB4635D.jpeg);
		background-size: 100% 100%;
		height: 100vh;
	}

	.head-box {
		padding: 1upx 0upx;

		.center-box {
			background-color: rgba(245, 187, 0, 0);
			width: 100%;

			.all-text-box {
				margin-top: 50upx;
				padding: 1upx;
				width: 700upx;
				height: 520upx;
				margin-left: 25upx;
				background-image: url(https://bsyjk-pic.bsyjk.cn/l/2F93A55DF77A498DB61F03577939B1FF.png);
				background-size: 100% 100%;

				.titles-text {
					font-size: 48upx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: bold;
					color: #2EA7E0;
					width: 100%;
					text-align: center;
					margin-top: 84upx;
					// line-height: 67px;
				}

				.slogan-text {
					width: 100%;
					text-align: center;
					font-size: 36upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #2EA7E0;
					margin-top: 10upx;
				}

				.envelope-img {
					width: 146upx;
					height: 134upx;
					margin-left: 276upx;
					margin-top: 26upx;
				}

				.invite-but {
					width: 378upx;
					height: 90upx;
					line-height: 90upx;
					text-align: center;
					color: #FFFFFF;
					font-size: 34upx;
					// background: linear-gradient(112deg, #81C042 0%, #2EA7E0 100%);
					background: url(https://bsyjk-pic.bsyjk.cn/toprbg/10099E8526734AC383D6ADEED897F016.png)no-repeat;
					background-size: 750upx 375upx;
					border-radius: 45upx;
					margin-left: 160upx;
					margin-top: 28upx;
					position: relative;

					.openChat {
						top: 0;
						left: 0;
						position: absolute;
						width: 100%;
						height: 100%;
						opacity: 0;
						z-index: 999;
					}
				}
			}

			//关联客户有什么作用
			.effect-box {
				width: 634upx;
				margin-top: 80upx;
				margin-left: 58upx;

				.effect-title {
					border-radius: 20upx;
					padding: 0upx 20upx;
					background-color: #FFFFFF;
					width: 250upx;
					font-size: 22upx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #2EA7E0;
					height: 40upx;
					line-height: 40upx;
				}

				.every-effect-list {
					margin-top: 12upx;
					color: #FFFFFF;
					font-size: 22upx;
				}

			}







		}

	}
</style>
